<template>
  <div class="info">
    <div style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        transition: background-color 0.4s ease;
        background-color: white;
        position: sticky;
        top: 0;
        z-index: 999;
      ">
      <img @click="goBack" style="width: 28px"
        src="//cdn.cnbj1.fds.api.mi-img.com/mishop-m/production/trade_center/res/images/mishop/product/arrow_left_circle_gray.png"
        alt="" />
      <div
        style="font-weight: bold;font-family:'STSong';width: 50vw;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center;">
        {{ pname }}</div>
      <img style="width: 28px"
        src="//cdn.cnbj1.fds.api.mi-img.com/mishop-m/production/trade_center/res/images/mishop/product/share_circle_gray.png"
        alt="" />
    </div>
    <div class="box" v-if="!flag">
      <van-tabs scrollspy sticky title-active-color="red" line-height="2px" color="#ed5b00" offset-top="48">
        <!-- 商城页 -->
        <van-tab title="商城">
          <van-swipe>
            <van-swipe-item v-for="(item, index) in swipe" :key="index"><img style="width: 100vw; height: 400px"
                :src="`${item.img_url}`" alt="" /></van-swipe-item>

            <template #indicator="{ active, total }">
              <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
            </template>
          </van-swipe>
          <div class="info-box">
            <div class="info-price">
              <div style="color: rgb(255, 89, 0)">￥</div>
              <div style="color: rgb(255, 89, 0); font-size: 24px; font-weight: 400">
                {{ price }}
              </div>
              <del v-if="price !== market_price" style="
                color: rgba(0, 0, 0, 0.3);
                font-size: 13px;
                font-weight: 400;
                margin-left: 7.66667px;
                margin-top: 5px;
                text-decoration-line: line-through;
              ">￥{{ market_price }}</del>
              <span style="
                color: rgb(255, 89, 0);
                font-size: 10px;
                padding: 1px;
                border: 1px solid #ffd9c5;
                margin-left: 8px;
              ">最高享24期免息</span>
            </div>
            <div class="info-safe">
              <div style="
                padding: 2px;
                border: 1px solid #ffd9c5;
                background-color: #fff;
                border-radius: 2px;
              ">
                预计可得200米金
              </div>
              <div>更多优惠<van-icon name="arrow" /></div>
            </div>
            <div class="info-dec">
              <div style="
                color: rgb(0, 0, 0);
                font-size: 18px;
                font-weight: 700;
                opacity: 0.9;
                padding: 8px 10px;
              ">
                {{ pname }}
              </div>
              <ul>
                <li v-for="(item, index) in pdesc" :key="index">
                  {{ index + 1 }}.{{ item }}
                </li>
              </ul>
            </div>
          </div>
          <div v-if="isShow" class="info-boxs">
            <ul>
              <li @click="show" v-for="(item, index) in newpj" :key="index">
                <div style="margin-left: 38%; width: 72px">
                  <img style="width: 18px" :src="`${item.icon}`" alt="" />
                </div>
                <div style="
                  color: rgba(0, 0, 0, 0.9);
                  font-size: 12px;
                  line-height: 21px;
                  margin-top: 4.33333px;
                  width: 72px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  text-align: center;
                ">
                  {{ item.top_title }}
                </div>
                <div style="
                  color: rgba(0, 0, 0, 0.5);
                  font-size: 11px;
                  line-height: 18px;
                  width: 72px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  text-align: center;
                ">
                  {{ item.bottom_title }}
                </div>
              </li>
            </ul>
          </div>
          <van-popup v-model:show="sflag" round closeable close-icon="close" position="bottom" :style="{ height: '70%' }">
            <p style="
              color: rgb(0, 0, 0);
              font-size: 18px;
              font-weight: 500;
              text-align: center;
              position: sticky;
              top: -1px;
              background-color: #fff;
              width: 100vw;
              padding: 10px 0;
            ">
              关键参数
            </p>

            <div v-if="mydata.goods_info" style="display: flex; margin-top: 20px; margin-left: 20px"
              v-for="(item, index) in mydata.goods_info[0].class_parameters.list" :key="index">
              <div style="
                color: rgba(0, 0, 0, 0.5);
                font-size: 14px;
                line-height: 21px;
                width: 144px;
              ">
                {{ item.name }}
              </div>
              <div style="
                color: rgba(0, 0, 0, 0.9);
                font-size: 14px;
                line-height: 21px;
                width: 213.333px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              ">
                {{ item.value }}
              </div>
            </div>
          </van-popup>
          <div class="info-boxss">
            <div @click="Choice" class="info-choice">
              <ul>
                <li style="
                  color: rgb(0, 0, 0);
                  font-size: 12px;
                  opacity: 0.5;
                  width: 39px;
                ">
                  已选
                </li>
                <li style="padding-right: 70px">
                  <div style="
                    color: rgb(0, 0, 0);
                    font-size: 12px;
                    opacity: 0.9;
                    width: 229px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  ">
                    {{ infoName }}x1
                  </div>
                  <div style="
                    color: rgb(255, 89, 0);
                    font-size: 12px;
                    margin-top: 5.33333px;
                  ">
                    可选增值服务
                  </div>
                  <div v-if="infoColor.length > 0" style="display: flex">
                    <div class="hhh" style="
                      width: 150px;
                      overflow: auto;
                      white-space: nowrap;
                      display: flex;
                    ">
                      <div style="margin-right: 6.66px" v-for="(item, index) in goods.slice(0, infoColor.length)"
                        :key="index">
                        <img style="width: 43px" :src="`${item.image_share}`" alt="" />
                      </div>
                    </div>
                    <div style="
                      width: 65px;
                      color: rgb(0, 0, 0);
                      font-size: 11px;
                      line-height: 18px;
                      opacity: 0.5;
                      text-align: center;
                      margin-left: 6.66px;
                      background-color: rgb(248, 248, 248);
                    ">
                      共{{ infoColor.length }}中
                      <div>颜色可选</div>
                    </div>
                  </div>
                </li>
                <li><van-icon name="arrow" /></li>
              </ul>
              <div></div>
            </div>
            <van-popup v-model:show="isChoice" round closeable close-icon="close" position="bottom"
              :style="{ height: '70%' }">
              <div class="detail-title" style="
                display: flex;
                align-items: center;
                margin: 3%;
                width: 90vw;
              ">
                <div class="detail-img">
                  <img style="
                    width: 90px;
                    padding: 1px;
                    background-color: #ededed;
                    margin: 5%;
                    border-radius: 10px;
                  " :src="`${arr[0].image_share}`" alt="" />
                </div>
                <div style="margin-left: 5%">
                  <div style="display: flex">
                    <div class="detail-price" style="color: rgb(255, 89, 0)">
                      ￥
                    </div>
                    <div style="
                      color: rgb(255, 89, 0);
                      font-size: 20px;
                      font-weight: 400;
                    ">
                      {{ arr[0].price }}
                    </div>
                    <del v-if="price !== market_price" style="
                      color: rgba(0, 0, 0, 0.3);
                      font-size: 13px;
                      font-weight: 400;
                      margin-left: 7.66667px;
                      margin-top: 5px;
                      text-decoration-line: line-through;
                    ">￥{{ arr[0].market_price }}</del>
                  </div>
                  <div style="font-size: 13px; margin-top: 9px">
                    {{ arr[0].name }}
                  </div>
                </div>
              </div>
              <div style="margin-left: 5%" class="banben">
                <p style="font-size: 12px; font-weight: 500">版本</p>
                <ul style="display: flex; width: 80vw; flex-wrap: wrap">
                  <li @click="getBindex(item.prop_value_id, index)" class="bli" :class="{ active: gIndex == index }"
                    v-for="(item, index) in mydata.buy_option[0].list" :key="index" style="
                    padding: 5px 10px;
                    font-size: 12px;
                    border-radius: 999px;
                    margin-right: 15px;
                    margin-bottom: 10px;
                  ">
                    {{ item.name }}
                  </li>
                </ul>
              </div>
              <div style="margin-left: 5%" class="detail-price">
                <p style="font-size: 12px; font-weight: 500">颜色</p>
                <ul style="display: flex; width: 80vw; flex-wrap: wrap">
                  <li @click="getCindex(item.prop_value_id, index)" class="cli" :class="{ active: cIndex == index }"
                    v-if="mydata.buy_option.length > 1" style="
                    padding: 5px 10px;
                    border-radius: 999px;
                    font-size: 12px;
                    margin-right: 15px;
                    margin-bottom: 10px;
                  " v-for="(item, index) in mydata.buy_option[1].list" :key="index">
                    {{ item.name }}
                  </li>
                </ul>
              </div>
              <div style="
                width: 80vw;
                display: flex;
                justify-content: space-between;
                margin-left: 5%;
                margin-top: 5%;
              " class="shop-num">
                <div style="font-size: 12px; font-weight: 500">购买数量</div>
                <div style="display: flex; align-items: center">
                  <div @click="reduceNum" style="height: 18.4px">
                    <img style="width: 17px"
                      src="https://cdn.cnbj1.fds.api.mi-img.com/mishop-m/production/trade_center/res/images/mishop/product/reduce_icon.png"
                      alt="" />
                  </div>
                  <div style="
                    font-size: 14px;
                    padding: 0 40%;
                    background-color: #f9f9f9;
                  ">
                    {{ shopNum }}
                  </div>
                  <div @click="addNum" style="height: 18.4px">
                    <img style="width: 17px"
                      src="https://cdn.cnbj1.fds.api.mi-img.com/mishop-m/production/trade_center/res/images/mishop/product/add_icon.png"
                      alt="" />
                  </div>
                </div>
              </div>
              <div style="margin-left: 5%" class="detail-serve">
                <p style="font-size: 12px; font-weight: 500">小米服务</p>
                <ul>
                  <li v-if="arr[0].multi_service_bargins" style="margin-left: 2%"
                    v-for="(item, index) in arr[0].multi_service_bargins.first" :key="index">
                    <p style="font-size: 12px; font-weight: 500">
                      {{ item.type_name }}
                    </p>
                    <div style="
                      display: flex;
                      width: 85vw;
                      justify-content: space-between;
                      flex-wrap: wrap;
                    ">
                      <div v-for="a in item.service_info" :key="a.goods_id" style="
                        width: 35vw;
                        display: flex;
                        justify-content: space-between;
                        padding: 5px 10px;
                        background-color: #ededed;
                        border-radius: 999px;
                        margin-bottom: 10px;
                      ">
                        <div style="font-size: 12px">
                          {{ a.service_short_name }}
                        </div>
                        <div style="font-size: 12px">{{ a.service_price }}元</div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <div v-show="arr[0].is_stock" style="
                display: flex;
                width: 100vw;
                justify-content: space-evenly;
                position: sticky;
                bottom: 0;
                background-color: #fff;
                padding: 10px 0;
              " class="detail-shop">
                <div @click="addCar" style="
                  width: 35vw;
                  background-color: #ffb849;
                  border-radius: 999px;
                  padding: 2% 4%;
                  text-align: center;
                  color: rgb(255, 255, 255);
                  font-size: 14px;
                  font-weight: 500;
                ">
                  加入购物车
                </div>
                <div style="
                  width: 35vw;
                  background-color: #fe671b;
                  border-radius: 999px;
                  padding: 2% 4%;
                  text-align: center;
                  color: rgb(255, 255, 255);
                  font-size: 14px;
                  font-weight: 500;
                " @click="addPay">
                  立即购买
                </div>
              </div>
              <div v-show="!arr[0].is_stock" style="
                width: 100vw;
                position: sticky;
                bottom: 0;
                background-color: #fff;
                padding: 10px 0;
              ">
                <div style="
                  width: 80vw;
                  background-color: #ffb38d;
                  border-radius: 999px;
                  padding: 2% 4%;
                  text-align: center;
                  color: rgb(255, 255, 255);
                  font-size: 14px;
                  font-weight: 500;
                  margin: 0 auto;
                ">
                  暂时缺货
                </div>
              </div>
            </van-popup>
            <!-- 已选 -->
            <div @click="Ps" class="info-peisong">
              <div style="
                color: rgb(0, 0, 0);
                font-size: 12px;
                opacity: 0.5;
                width: 39px;
              ">
                配送
              </div>
              <div style="width: 229px; padding-right: 70px">
                <ul style="
                  display: flex;
                  justify-content: space-between;
                  width: 200px;
                  color: rgb(0, 0, 0);
                  font-size: 12px;
                  opacity: 0.5;
                ">
                  <li style="width: 20px"><van-icon name="location-o" /></li>
                  <li>{{ address[adsId].province }}</li>
                  <li>{{ address[adsId].city }}</li>
                  <li>{{ address[adsId].county }}</li>
                  <li>
                    {{ address[adsId].addressDetail }}
                  </li>
                </ul>
              </div>
              <div><van-icon name="arrow" /></div>
            </div>
            <van-popup v-model:show="isPs" round closeable close-icon="close" position="bottom"
              :style="{ height: '70%' }">
              <div style="
                color: rgb(0, 0, 0);
                font-size: 18px;
                font-weight: 500;
                text-align: center;
                position: sticky;
                top: -1px;
                background-color: white;
                width: 100vw;
                padding: 15px 0;
                z-index: 999;
              ">
                选择地址
              </div>
              <van-address-list v-model="chosenAddressId" :list="address" default-tag-text="默认" @select="onSelect"
                @add="onAdd" />
            </van-popup>
            <!-- 配送 -->
            <div @click="Serve" v-if="isShow" class="info-serve">
              <div style="
                color: rgb(0, 0, 0);
                font-size: 12px;
                opacity: 0.5;
                width: 39px;
              ">
                服务
              </div>
              <div style="width: 229px; padding-right: 70px">
                <ul style="display: flex; flex-wrap: wrap">
                  <li v-for="(item, index) in serve" :key="index" v-show="item.is_page_show">
                    <van-icon name="passed" />
                    {{ item.title }}
                  </li>
                </ul>
              </div>
              <div><van-icon name="arrow" /></div>
            </div>
            <van-popup v-model:show="isServe" round closeable close-icon="close" position="bottom"
              :style="{ height: '70%' }">
              <div style="
                color: rgb(0, 0, 0);
                font-size: 18px;
                font-weight: 500;
                text-align: center;
                position: sticky;
                top: -1px;
                background-color: white;
                width: 100vw;
                padding: 15px 0;
                z-index: 999;
              ">
                服务说明
              </div>
              <ul style="margin: 10px 20px">
                <li style="margin: 10px; line-height: 2" v-for="(item, index) in sdetail" :key="index">
                  <div style="
                    color: rgb(0, 0, 0);
                    font-size: 14px;
                    font-weight: 500;
                    opacity: 0.9;
                  ">
                    <img style="width: 17px; margin-right: 5px"
                      src="https://cdn.cnbj1.fds.api.mi-img.com/mishop-m/production/trade_center/res/images/mishop/product/service_modal_icon1.png"
                      alt="" />{{ item.title }}
                  </div>
                  <div style="
                    color: rgb(0, 0, 0);
                    font-size: 13px;
                    line-height: 23px;
                    margin-top: 8.66667px;
                    opacity: 0.5;
                  ">
                    {{ item.desc }}
                  </div>
                </li>
              </ul>
            </van-popup>
            <!-- 服务 -->
          </div>
          <!-- 商城 -->
        </van-tab>
        <van-tab title="评价">
          <TakingView />
        </van-tab>
        <van-tab title="推荐">
          <InfoRecommendView />
        </van-tab>
      </van-tabs>


      <div class="info-footer">
        <div style="font-size: 11px">
          <van-icon size="22" name="home-o" />
          <div @click="Back" style="margin-top: 2px">首页</div>
        </div>
        <div style="font-size: 11px">
          <van-icon size="22" name="service-o" />
          <div style="margin-top: 2px" @click="goKefu">客服</div>
        </div>
        <van-badge :content="`${userStore.shopCar.length}`" max="99">
          <div style="font-size: 11px">
            <div style="margin-left: 5px">
              <van-icon size="22" name="shopping-cart-o" />
            </div>
            <router-link :to="{ name: 'cart' }">
              <div style="margin-top: 2px">购物车</div>
            </router-link>

          </div>
        </van-badge>


        <div @click="Choice" class="info-car">加入购物车</div>
        <var-snackbar v-model:show="isCar">成功加入购物车</var-snackbar>
        <div @click="Choice" class="info-buy">立即购买</div>
      </div>
    </div>
    <div class="nodata" v-if="flag">
      该商品已经下架
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getInfo } from "../../api/info";
import { useUserStore } from "../../stores/userStore/user";
import { SubmitOrder } from '../../stores/userStore/order'
import TakingView from '../../components/info/TakingView.vue'
import { type cart } from '@/typings'
import InfoRecommendView from '../../components/info/InfoRecommendView.vue'

const userStore = useUserStore();
const orderStore = SubmitOrder();
const address = ref([]);
address.value = userStore.address;
const route = useRoute();
const router = useRouter();
const uid = ref(route.params.id);
const sflag = ref(false);
const mydata = ref();
const swipe = ref();
const price = ref();
const market_price = ref();
const pname = ref();
const pdesc = ref();
const pj = ref([]);
const newpj = ref([]);
const infoName = ref();
const serve = ref([]);
const isShow = ref(false);
const infoColor = ref([]);
const goods = ref([]);
const isChoice = ref(false);
const isPs = ref(false);
const isServe = ref(false);
const sdetail = ref([]);
const chosenAddressId = ref("1");
const adsId = ref(0);
const shopNum = ref(1);
const gIndex = ref(0);
const cIndex = ref(0);
const chang = ref(0);
const anum = ref(0);
const bnum = ref(0);
const arr = ref([]);
const goodsArr = ref([]);
const bname = ref([]);
const cname = ref([]);
const bName = ref();
const cName = ref();

const isCar = ref(false)


const goKefu = () => {
  router.push('kefu')
}


const Back = () => {
  router.push('/')
}
const addCar = () => {

  let obj = ref<cart>({
    name: pname.value,
    url: arr.value[0].image_share,
    marketPrice: arr.value[0].market_price,
    price: arr.value[0].price,
    level: bName.value,
    color: cName.value,
    basePrice: arr.value[0].price,
    number: shopNum.value
  })

  userStore.setShopCar(obj.value);
  isCar.value = true
};

const addPay = () => {
  let obj = ref<cart>({
    name: pname.value,
    url: arr.value[0].image_share,
    marketPrice: arr.value[0].market_price,
    price: arr.value[0].price,
    level: bName.value,
    color: cName.value,
    basePrice: arr.value[0].price,
    number: shopNum.value
  })
  let addArr = ref([])
  addArr.value.push(obj.value)
  orderStore.submit(addArr.value);
  router.push('orders')
}


const getCindex = (b, i) => {
  cIndex.value = i;
  cName.value = cname.value[i].name;
  bnum.value = b;
  arr.value = goodsArr.value.filter((item) => {
    return (
      anum.value == item.prop_list[0].prop_value_id &&
      bnum.value == item.prop_list[1].prop_value_id
    );
  });

};

const getBindex = (a, i) => {
  bName.value = bname.value[i].name;
  gIndex.value = i;

  anum.value = a;
  arr.value = goodsArr.value.filter((item) => {

    if (item.prop_list.length > 1) {
      return (
        anum.value == item.prop_list[0].prop_value_id &&
        bnum.value == item.prop_list[1].prop_value_id
      );
    } else {
      return anum.value == item.prop_list[0].prop_value_id
    }

  });
};
const addNum = () => {
  shopNum.value++;
};
const reduceNum = () => {
  if (shopNum.value == 1) {
    return;
  }
  shopNum.value--;
};


const show = () => {
  sflag.value = true;
};
const Choice = () => {
  isChoice.value = true;
};
const Ps = () => {
  isPs.value = true;
};
const Serve = () => {
  isServe.value = true;
};

const onAdd = () => {
  router.push("newaddress");
};

const onSelect = (item) => {
  
  adsId.value = item.id;
  isPs.value = false;
};
const flag = ref(false)
const Info = async () => {

  let data = await getInfo(uid.value);
  if (!data.data) {
    flag.value = true

    return
  }

  mydata.value = data.data || [];
  swipe.value = data.data.goods_info[0].gallery_v3 || [];
  price.value = data.data.goods_info[0].price || [];
  market_price.value = data.data.goods_info[0].market_price || [];
  pname.value = data.data.product_info.name || [];
  pdesc.value = data.data.product_info.sell_point_desc || [];
  pj.value = data.data.goods_info[0].class_parameters.list || [];
  infoName.value = data.data.goods_info[0].name || [];

  if (data.data.buy_option.length > 1) {

    infoColor.value = data.data.buy_option[1].list || [];
    chang.value = data.data.buy_option[1].list.length || [];
    bnum.value = data.data.buy_option[1].list[0].prop_value_id || [];
    cname.value = data.data.buy_option[1].list || [];
    cName.value = data.data.buy_option[1].list[0].name || [];




  }
  goods.value = data.data.goods_info || [];
  serve.value = data.data.goods_info[0].service_refound_policy_list.list_new || [];
  sdetail.value = data.data.goods_info[0].service_refound_policy_list.list_new || [];
  anum.value = data.data.buy_option[0].list[0].prop_value_id || [];
  goodsArr.value = data.data.goods_info || [];
  bname.value = data.data.buy_option[0].list || [];
  bName.value = data.data.buy_option[0].list[0].name || [];
  arr.value = data.data.goods_info.filter((item) => {
    if (item.prop_list.length > 1) {
      return (
        anum.value == item.prop_list[0].prop_value_id &&
        bnum.value == item.prop_list[1].prop_value_id
      );
    } else {
      return anum.value == item.prop_list[0].prop_value_id
    }

  });

  setArr();
};
onMounted(() => {
  Info();
  setArr();
});
const goBack = () => {
  window.history.back();
};
const setArr = () => {
  pj.value = pj.value.map((item) => {
    if (!item.icon) {
      return;
    } else {
      isShow.value = true;
      return {
        icon: item.icon,
        top_title: item.top_title,
        bottom_title: item.bottom_title,
      };
    }
  });
  for (let i = 0; i < pj.value.length; i++) {
    if (pj.value[i] !== undefined) {
      newpj.value.push(pj.value[i]);
    }
  }
};



</script>

<style scoped>
.nodata {
  text-align: center;
  margin-top: 100px;
}

.info {
  width: 100%;
  background-color: #f5f5f5;
  margin-bottom: 8%;
  height: 100vh;
  z-index: 999;
  position: fixed;
  top: 0;
  overflow: auto;
}

.info-footer {
  width: 100vw;
  background-color: white;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 8px 0;
  position: fixed;
  bottom: 0;
  z-index: 999;
}

.info-car,
.info-buy {
  padding: 10px 18px;
  border: none;
  color: white;
  border-radius: 999px;
}

.info-car {
  background-color: rgb(255, 202, 96);
}

.info-buy {
  background-color: rgb(255, 78, 17);
}

.info-box {
  margin: 10px auto;
  width: 94vw;
  height: 228px;
  background-color: #fff;
  border-radius: 10px;
}

.info-price {
  display: flex;
  align-items: center;
  padding: 10px;
}

.info-safe {
  margin: 0 auto;
  width: 80vw;
  border-radius: 5px;
  padding: 10px 8px;
  background-color: #fff5f0;
  display: flex;
  justify-content: space-between;
  color: rgb(255, 89, 0);
  font-size: 11px;
}

.info-dec li {
  padding-left: 10px;
  margin: 5px 0;
  color: rgb(0, 0, 0);
  font-size: 12px;
  line-height: 22px;
  opacity: 0.9;
}

.info-boxs {
  margin: 10px auto;
  width: 94vw;
  height: 83px;
  background-color: #fff;
  border-radius: 10px;
}

.info-boxs ul {
  display: flex;
  overflow: scroll;
  flex-wrap: nowrap;
}

.info-boxs ul::-webkit-scrollbar {
  height: 0px;
}

.info-boxs ul li {
  padding-top: 12px;
  width: 20vw;
  margin: 0 3px;
}

.info-boxss {
  margin: 10px auto;
  width: 94vw;
  background-color: #fff;
  border-radius: 10px;
}

.info-choice {
  padding: 13px 8.66667px 11px 11px;
}

.info-peisong {
  padding: 13px 8.66667px 11px 11px;
  display: flex;
}

.info-peisong li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 50px;
}

.info-serve {
  display: flex;
  padding: 13px 8.66667px 11px 11px;
}

.info-serve li {
  color: rgb(0, 0, 0);
  font-size: 12px;
  margin-bottom: 5.33333px;
  opacity: 0.5;
  margin: 0 8px;
}

.info-choice ul {
  display: flex;
}

.custom-indicator {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border-radius: 999px;
  padding: 2px 5px;
  font-size: 12px;
  color: white;
  background: rgba(0, 0, 0, 0.2);
}

.hhh::-webkit-scrollbar {
  height: 0;
}

.bli {
  background-color: #ededed;
}

.cli {
  background-color: #ededed;
}

.active {
  color: white;
  background-color: red;
}
</style>